<template>
	<view>
		
		<view class="bg">
			
			<view class="log-head">
				<view class="up">
					<view class="textt">
						总收益(元)
					</view>
					<view class="total">
						¥{{total}}
					</view>
				</view>
				<view class="down">
					<view class="left">
						<view class="textp">
							设备总收益(元)
						</view>
						<view class="money" style="display: flex;justify-content: center;">
							¥{{yestoady}}
						</view>
					</view>
					<view class="right">
						<view class="textp">
							分润总收益(元)
						</view>
						<view class="money" style="display: flex;justify-content: center;">
							¥{{max}}
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="shouyi">
				<view class="yi-des">
					<view class="shouyi-text">收益趋势</view>
					<!-- <view class="day">
						<view class="seven">7天</view>
						<view class="fifteen">15天</view>
					</view> -->
				</view>
				
				<!-- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="shouyi-text">收益趋势</view> -->
					<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
				<!-- </view> -->
				<view class="qiun-charts">
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
					 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
					<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
				</view>
			</view>
			
			<view class="sy-item">
				<view class="sy-t" >
					<view class="sy-text">明细</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields='month'>
						<view class="uni-input" style="font-size: 26rpx; color: #999999;">{{date}}▼</view>
					</picker>
				</view>
				
				<view class="syi-content" v-for="(item,index1) in list" :key='index1' v-if="item.sum != null">
					<view class="syi-con">
						<view class="y-time">
							{{item.create_time}}
						</view>
						<view class="y-time" style="">
							{{content}}
						</view>
						<view class="y-text">
							当日收益
						</view>
						<view class="y-money">
							¥{{item.sum}}
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import uCharts from "../../components/u-charts/u-charts.js";
	var _self;
	var canvasObj = {};
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				total:0,
				max:0,
				yestoady:0,
				list:[],
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,
				maxY:0,
				minY:0,
				id:'',
				jiankong:1,
				content:'',
				date: currentDate,
				
			};
		},
		onLoad(option) {
			console.log(option)
			this.total = option.sum
			
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(720);
			this.cHeight = uni.upx2px(490);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);
			
			this.getLog()
		},
		onReady() {
			this.getServerData();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//顶部切换
			changeTime(index){
				this.tabIndex=index;
			},
			
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.getLog()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				
				if (type === 'start') {
					year = year - 1;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				
				return `${year}-${month}`;
			},
			
			
			getLog(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getUserLog')({
					id:userinfo.id,
					date:this.date
				}).then(res=>{
					if(res.code == 200){
						
						this.list = res.data.list
						this.yestoady = res.data.self
						this.max = res.data.friend
						this.content = res.data.content
					}
					uni.hideLoading()
				})
			},
			info(time){
				uni.navigateTo({
					url:`/pages/index/info?time=${time}`
				})
			},
			getServerData() {
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('getLine')({
					id:userinfo.id,
					condition:1
				}).then(res=>{
					if(res.code == 200){
						this.maxY = res.data.max
						this.minY = res.data.min
						_self.fillData(res.data.list);
					}
				})
			},
			
			fillData(data) {
				this.serverData = data;
				this.tips = data.tips;
				let LineA = {
					categories: [],
					series: []
				};
				LineA.categories = data.LineA.categories;
				LineA.series = data.LineA.series;
				this.showLineA("canvasLineA", LineA);
			},
			
			showLineA(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 7,
						scrollShow: false,
						scrollAlign: 'left',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'none',
						splitNumber: 5,
						min: this.minY,
						max: this.maxY,
						format: (val) => {
							return val.toFixed(0) + '元'
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
				});		
			},
			
			touchLineA(e) {
				canvasObj['canvasLineA'].scrollStart(e);
			},
			moveLineA(e) {
				canvasObj['canvasLineA'].scroll(e);
			},
			touchEndLineA(e) {
				canvasObj['canvasLineA'].scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style>
@import url("earningsDetails.css");
@import url("@/common/uni.css");
</style>
